<style>
        .out{
            background-color: #fff;
            border: 1px solid #888;
            width:99%;
            color:#444;
        }
        
    </style>
    <div class='title'>滑动选择器</div>
    
    <div class="sub">
        <div class='text' jshow='!{{$.showRes}}'>移动端暂不支持</div>
        <div class='text'>
                所有的可配置的属性如下：<br>
                &lt;div class='j-slider' min='0' max='100' width='150' value='0' jui-change=''>&lt;/div><br>
                以上属性值皆为默认值<br>
                绑定的value值范围必须在min-max之间。若是不在这个范围之间，Jet会将值强制设置到这个区间之内。<br>
                slider可以使用JUI中的 大小、颜色和禁止属性<br>
                width支持各种css单位，若是不带单位默认是px<br>
                请看一个例子：
            <div class="out o-hide">
                <div class='j-slider success xs' width='200' value='40' jui-bind='slider1' jui-change='cc'></div>
                <span j='slider1'></span> <br>
                <div class='j-slider warn s' min='20' width='300' value='40' jui-bind='slider2' jui-change='cc'></div>
                <span j='slider2'></span> <br>
                <div class='j-slider' min='30' max='200' value='40' jui-bind='slider3' jui-change='cc'></div>
                <span j='slider3'></span> <br>
                <div class='j-slider info l' width='100%' value='40' jui-bind='slider4' jui-change='cc'></div>
                <span j='slider4'></span> <br>
                <div class='j-slider danger xl' width='20em' value='40' jui-bind='slider5' jui-change='cc'></div>
                <span j='slider5'></span> <br>
                <div class='j-slider xl' disabled min='20' width='200' value='40'></div>
            </div>
            <div class='j-code' disabled width='99%' height='auto'>
&lt;div class='j-slider success xs' width='200' value='40' jui-bind='slider1' jui-change='cc'>&lt;/div>
&lt;span j='slider1'>&lt;/span> &lt;br>
&lt;div class='j-slider warn s' min='20' width='300' value='40' jui-bind='slider2' jui-change='cc'>&lt;/div>
&lt;span j='slider2'>&lt;/span> &lt;br>
&lt;div class='j-slider' min='30' max='200' value='40' jui-bind='slider3' jui-change='cc'>&lt;/div>
&lt;span j='slider3'>&lt;/span> &lt;br>
&lt;div class='j-slider info l' width='100%' value='40' jui-bind='slider4' jui-change='cc'>&lt;/div>
&lt;span j='slider4'>&lt;/span> &lt;br>
&lt;div class='j-slider danger xl' width='20em' value='40' jui-bind='slider5' jui-change='cc'>&lt;/div>
&lt;span j='slider5'>&lt;/span> &lt;br>
&lt;div class='j-slider xl' disabled min='20' width='200' value='40'>&lt;/div>
&lt;script>
new Jet({
    data:{
        slider1:10,
        slider2:40,
        slider3:50,
        slider4:90,
        slider5:150,
    },func:{
        cc:function(opt){
            console.log(this,opt)
        }
    }
});
&lt;/script>
            </div>
        </div>
    
    <script>
        new Jet({
            data:{
                slider1:10,
                slider2:40,
                slider3:50,
                slider4:90,
                slider5:150,
                showRes:function(){
                    return !$J.isMobile();
                }
            },func:{
                cc:function(opt){
                    console.log(this,opt)
                }
            }
        });
    </script>